<template>
  <div
    id="account-line"
    :style="{ height: '360px' }"
  />
</template>

<script>
  import { ChartResizeMixin } from '@/mixins/ChartResizeMixin'
  import * as echarts from 'echarts';

  export default {
    name: 'AccountLine',
    mixins: [ChartResizeMixin],
    props: {
      accountList: {
        type: Array,
        default: () => ([])
      }
    },
    watch: {
      accountList(val) {
        if (val) {
          this.drawLineChart()
        }
      }
    },
    methods: {
      drawLineChart() {
        this.chart = echarts.init(document.getElementById('account-line'), 'light')
        const option = {
          title: {
            text: '告警趋势图',
            left: 'center',
            textStyle: {
              color: '#6B6B6B',
              fontWeight: 500,
              fontSize: 14
            }
          },
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            left: "center",
            top: 'bottom',
            data: [{
              name: '一般',
            },
            {
              name: '重要',
            },
            {
              name: '严重',
            }],
          },
          grid: {
            left: '3%',
            right: '6%',
            bottom: '10%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.accountList.map(item => item.label),
            // axisLine: {
            //   lineStyle: {
            //     color: "#0784D3"
            //   }
            // },
          },
          yAxis: {
            name: '',
            type: 'value',
            nameLocation: "end",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#dddddd"
              },
            },
            // axisLine: {
            //   lineStyle: {
            //     color: "#0784D3"
            //   }
            // },
          },
          series: [{
            name: '一般',
            type: 'line',
            data: this.accountList.map(item => item.value_normal),
          }, {
            name: '重要',
            type: 'line',
            data: this.accountList.map(item => item.value_critical),
          }, {
            name: '严重',
            type: 'line',
            data: this.accountList.map(item => item.value_serious),
          }, ],
        }

        this.chart.setOption(option)
      }
    }
  }
</script>